import React, { useEffect, useState } from 'react'
import { NavBar, Button, Toast, Dialog, ActionSheet, Modal } from 'antd-mobile'
import './Setting.css'
import { useNavigate } from 'react-router-dom'
import { useDispatch, useSelector } from 'react-redux'
import { ExclamationTriangleOutline, UserOutline, EditSOutline, AppstoreOutline, SetOutline, CloseCircleOutline, LockOutline, UnlockOutline } from 'antd-mobile-icons'
import ajax from '../../api/ajax'
import { fontSizeChange, bg_1Change, bg_2Change, color_1Change, color_2Change, color_3Change, alipayIdChange, wechatIdChange } from '../../redux/SettingSlice/SettingSlice'



export default function Setting() {
    const dispatch = useDispatch()
    const back = () => {
        window.history.back(-1)
    }
    // const dispatch = useDispatch();
    const user = useSelector(state => state.UserSliceReducer.user);
    const fontSize = useSelector(state => state.SettingSliceReducer.fontSize);
    const bg_1 = useSelector(state => state.SettingSliceReducer.bg_1);
    const bg_2 = useSelector(state => state.SettingSliceReducer.bg_2);
    const alipayId = useSelector(state => state.SettingSliceReducer.alipayId);
    const wechatId = useSelector(state => state.SettingSliceReducer.wechatId);
    

    useEffect(() => {
        document.documentElement.style.setProperty('--fontSize', fontSize);
        document.documentElement.style.setProperty('--bg_1', bg_1);
        document.documentElement.style.setProperty('--bg_2', bg_2);
    }, [fontSize, bg_1, bg_2])
    const navigate = useNavigate()

    const User = () => {
        navigate('/home/user')
    }
    const Setting = () => {

    }
    const Exit = () => {
        localStorage.removeItem('Authorization')
        localStorage.removeItem('persist:root')
        localStorage.removeItem('userToken')
        navigate('/')
    }
    // 字体大小
    const [visible, setVisible] = useState(false)
    const FontSizeActions = [
        {
            text: '小号', key: '16px',
            onClick: async () => {
                const result = await Dialog.confirm({ content: '确定要保存吗？' })
                if (result) {
                    dispatch(fontSizeChange('.8rem'))
                    Toast.show('已切换成小号字体')
                }
            },
        },
        {
            text: '中号(默认)', key: '20px',
            onClick: async () => {
                const result = await Dialog.confirm({ content: '确定要保存吗？' })
                if (result) {
                    dispatch(fontSizeChange('1rem'))
                    Toast.show('已切换成默认字体')
                }
            },
        },
        {
            text: '大号', key: '25px',
            onClick: async () => {
                const result = await Dialog.confirm({ content: '确定要保存吗？' })
                if (result) {
                    dispatch(fontSizeChange('1.25rem'))
                    Toast.show('已切换成大号字体')
                }

            },
        },
    ]
    // 主题颜色
    const [visible2, setVisible2] = useState(false)
    const ColorTextActions = [
        {
            text: '暗黑色', key: '#212333',
            onClick: async () => {
                const result = await Dialog.confirm({ content: '确定要保存吗？' })
                if (result) {
                    dispatch(bg_1Change('#212333'))
                    dispatch(bg_2Change('white'))
                    Toast.show('暗黑色切换成功')
                }
            },
        },
        {
            text: '青蓝色(默认)', key: '#3e9597',
            onClick: async () => {
                const result = await Dialog.confirm({ content: '确定要保存吗？' })
                if (result) {
                    dispatch(bg_1Change('#3e9597'))
                    dispatch(bg_2Change('white'))
                    Toast.show('青蓝色切换成功')
                }
            },
        },
        {
            text: '天蓝色', key: '#6D8CF8',
            onClick: async () => {
                const result = await Dialog.confirm({ content: '确定要保存吗？' })
                if (result) {
                    dispatch(bg_1Change('#6D8CF8'))
                    dispatch(bg_2Change('white'))
                    Toast.show('天蓝色切换成功')
                }
            },
        },
    ]
    // 绑定/解绑
    const [visible3, setVisible3] = useState(false)
    const AppActions = [
        {
            text: wechatId === '0' ? <div><UnlockOutline />微信未绑定</div> : <div><LockOutline />微信已绑定</div>,
            key: wechatId+'0',
            onClick: async () => {
                const result = await Dialog.confirm({ content: wechatId === '0' ? '是否要绑定微信' :'是否要解绑微信' })
                if (result) {
                    // dispatch(bg_1Change('#6D8CF8'))
                    let x = wechatId == '0' ? '1' : '0'
                    dispatch(wechatIdChange(x))
                    Toast.show({ content: x == '1' ? '绑定成功' : '解绑成功' })
                }
            },
        },
        {
            text: alipayId === '0' ? <div><UnlockOutline />支付宝未绑定</div> : <div><LockOutline />支付宝已绑定</div>,
            key: alipayId+'1',
            onClick: async () => {
                const result = await Dialog.confirm({ content: alipayId === '0' ? '是否要绑定支付宝' : '是否要解绑支付宝' })
                if (result) {
                    // dispatch(bg_1Change('#6D8CF8'))
                    let x = alipayId=='0'?'1':'0'
                    dispatch(alipayIdChange(x))
                    Toast.show({ content: x == '1' ? '绑定成功' : '解绑成功' })
                    
                }
            },
        },
    ]


    return (
        <div className='Setting'>
            <NavBar onBack={back} className='SettingTop'>设置</NavBar>
            <div className='SettingContent'>
                <div className='SettingContentItem'>
                    <UserOutline />
                    <Button size='large' type='button' onClick={User} className='SettingButton'>
                        用户
                    </Button>
                </div>
                <div className='SettingContentItem'>
                    <EditSOutline />
                    <Button size='large' type='button' onClick={() => setVisible(true)} className='SettingButton'>
                        青年/老人模式
                    </Button>
                    <ActionSheet
                        visible={visible}
                        actions={FontSizeActions}
                        onClose={() => setVisible(false)}
                    // onAction={(action, index) => fontAction(action, index)}
                    />
                </div>
                <div className='SettingContentItem'>
                    <AppstoreOutline />
                    <Button size='large' type='button' onClick={() => setVisible2(true)} className='SettingButton'>
                        颜色主题
                    </Button>
                    <ActionSheet
                        visible={visible2}
                        actions={ColorTextActions}
                        onClose={() => setVisible2(false)}
                        className='ActionSheet'
                    />
                </div>
                <div className='SettingContentItem'>
                    <SetOutline />
                    <Button size='large' type='button' onClick={() => setVisible3(true)} className='SettingButton'>
                        绑定/解绑
                    </Button>
                    <ActionSheet
                        visible={visible3}
                        actions={AppActions}
                        onClose={() => setVisible3(false)}
                        className='AppSheet'
                    />
                </div>
                <div className='SettingContentItem'>
                    <ExclamationTriangleOutline />
                    <Button size='large' type='button' className='SettingButton'
                        onClick={() =>
                            Modal.confirm({
                                content: '谨慎处理',
                                showCloseButton: true,
                                bodyClassName: 'SettingModal',
                                onConfirm: async () => {
                                    const oldTel = JSON.parse(localStorage.getItem('userToken')).tel
                                    const result = await ajax.post('/user/deleteUser', { id: user.id, oldTel })
                                    if (result.msg === 'success') {
                                        Toast.show({
                                            icon: 'success',
                                            content: '注销成功,3s后退出',
                                            position: 'bottom',
                                        })
                                        localStorage.removeItem('Authorization')
                                        localStorage.removeItem('persist:root')
                                        setTimeout(() => {
                                            navigate('/')
                                        }, 3000);
                                    } else {
                                        Toast.show({
                                            icon: 'fail',
                                            content: '注销失败',
                                            position: 'bottom',
                                        })
                                        console.log('服务器用户注销失败');
                                    }

                                },
                            })
                        }>
                        注销
                    </Button>
                </div>
                <div className='SettingContentItem'>
                    <CloseCircleOutline />
                    <Button size='large' type='button' onClick={Exit} className='SettingButton'>
                        退出
                    </Button>
                </div>
            </div>

        </div>
    )
}
